<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    body {
        background: #ccc;
    }

    label {
        width: 40px;
        display: inline-block;
    }

    span {
        color: red;
    }

    .container {
        margin: 100px auto;
        width: 400px;
        padding: 50px;
        line-height: 40px;
        border: 1px solid #999;
        background: #efefef;
    }

    span {
        margin-left: 30px;
        font-size: 12px;
    }

    .wrong {
        color: red
    }

    .right {
        color: green;
    }

    .defau {
        width: 200px;
        height: 20px;
    }

    .de1 {
        background-position: 0 -20px;
    }
</style>
<body>
<div class="container">
    <label>Q Q</label><input type="text" id="inp1"><span></span><br/>
    <label>手机</label><input type="text" id="inp2"><span></span><br/>
    <label>邮箱</label><input type="text" id="inp3"><span></span><br/>
    <label>座机</label><input type="text" id="inp4"><span></span><br/>
    <label>姓名</label><input type="text" id="inp5"><span></span><br/>
</div>
<script>
window.onload = function(){
    var inp1 = document.getElementById('inp1');
    var inp2 = document.getElementById('inp2');
    var inp3 = document.getElementById('inp3');
    var inp4 = document.getElementById('inp4');
    var inp5 = document.getElementById('inp5');

    //QQ正则表达式 5到11位 开头不能是0的数字
    var regQQ = /^[1-9]\d{5,11}$/;
    //手机
    var regPhone = /^1[0-9]{10}$/;
    //邮箱
    var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    //座机
    var regTel = /^(\d{3,4}-)*(\d{7,8})+$/;
    //姓名
    var regName = /^[\u4e00-\u9fa5]{2,}$/;

    check(inp1,regQQ);
    check(inp2,regPhone);
    check(inp3,regEmail);
    check(inp4,regTel);
    check(inp5,regName);
    function check(int,regEx){
        int.onblur = function(){
            if ( regEx.test(this.value) ){
                this.nextSibling.innerHTML='正确';
                this.nextSibling.className = 'right';
            }else{
                this.nextSibling.innerHTML='错误';
                this.nextSibling.className = 'wrong';
            }
        }
    }
}
</script>
</body>
</html>